<template>
  <div class="table_container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="60px" />
      <el-table-column align="center" label="头像">
        <template #default="scope">
          <el-image :src="scope.row.pic" alt="" @click="openDialog" style="cursor: pointer;">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="名称" />
      <el-table-column align="center" prop="role" label="角色" />
      <el-table-column align="center" prop="tel" label="账号" />
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button size="default" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="default" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="tableData.length" />
    <el-dialog v-model="showDialog" title="照片" width="30%" :close="handleClose">
      <QrcodeVue :value="qrcodeData.isValue" :size="qrcodeData.size" level="H"
        style="margin-left: 50%;transform:translateX(-50%)" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">关闭</el-button></span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="searchTable">
import { ref, reactive, onMounted } from 'vue'
import { indexMethods } from '@/hooks'
import { User } from '@/type/role'
import { userListAPI } from '@/api/user'
// 引入草料二维码组件
import QrcodeVue from 'qrcode.vue'
const qrcodeData = reactive({
  isValue: 'https://img0.baidu.com/it/u=2609600064,3891046315&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
  size: 150,
})
// 列表参数
const form = reactive({
  page: 1,
  pageSize: 10
})
// 弹框开关
let showDialog = ref(false)
// 列表数据
let tableData = ref([])
// 获取用户列表数据
const userList = async () => {
  const res: any = await userListAPI()
  console.log(res, 'res');

  if (res.code == 200) {
    tableData.value = res.data
  }
}

// 使用hooks
const indexMethod = (index: number) => {
  return indexMethods(index, form)
}
// 打开弹框
const openDialog = () => {
  showDialog.value = true
}
// 关闭弹框
const handleClose = () => {
  showDialog.value = false
}
// 点击编辑
const handleEdit = (row: User) => {
  console.log(row)
}
// 点击删除
const handleDelete = (row: User) => {
  console.log(row)
}
// 加载页面
onMounted(() => {
  userList()
})

</script>

<style scoped lang="less">
.table_container {}
</style>